<template>
  <div v-if="!assetsObj.assetsName">
    <van-nav-bar title="项目查看" left-arrow @click-left="onClickLeft"/>
    <h2 style="text-align: center;">暂无项目，请先添加项目</h2>
  </div>
  <div v-else>
    <van-nav-bar title="项目查看" left-arrow @click-left="onClickLeft"/>
    <div class="van-cell van-field">
      <div class="van-cell__title van-field__label">
        <span>项目名称</span>
      </div>
      <div class="van-cell__value" @click="showSheet = true">
        <div class="van-field__body">
          <div class="van-field__control">{{assetsObj.assetsName}}</div>
          <div class="van-field__right-icon">
            <i class="van-icon van-icon-arrow-down"></i>
          </div>
        </div>
      </div>
    </div>
    <van-cell :border="false" title="一级分类" :value="assetsObj.level1"/>
    <van-cell
      :border="false"
      title="二级分类"
      :value="assetsObj.level2list.map(t=>t.label).join(' | ')"
    />
    <van-cell :border="false" title="地址" :value="assetsObj.address"/>
    <van-row>
      <van-col class="my-col" span="8" v-for="(item,i) in photoDescList" :key="item.label + i">
        <div class="col-click" @click="imgClick(item.list)"></div>
        <van-icon name="photo-o"/>
        <span>{{item.level}}</span>
        <span>{{`${item.label.length > 5 ? item.label.substring(0,5) + '...' : item.label}(${item.list ? item.list.length : 0})`}}</span>
      </van-col>
    </van-row>
    <div class="button-wrap">
      <van-button type="primary" @click="exportZip">一键导出</van-button>
    </div>
    <van-action-sheet v-model="showSheet" :actions="actions" @select="onSelect"/>
  </div>
</template>
<script>
import { getTaskList } from "@/utils/storage.js";
import { tranObjToZip } from "@/utils/file.js";

import vanNavBar from "vant/lib/nav-bar";
import "vant/lib/nav-bar/style";
import vanActionSheet from "vant/lib/actionsheet";
import "vant/lib/actionsheet/style";
import vanCell from "vant/lib/cell";
import "vant/lib/cell/style";
import vanButton from "vant/lib/button";
import "vant/lib/button/style";
import vanRow from "vant/lib/row";
import "vant/lib/row/style";
import vanCol from "vant/lib/col";
import "vant/lib/col/style";
import vanIcon from "vant/lib/icon";
import "vant/lib/icon/style";
import "vant/lib/field/style";
export default {
  components: {
    vanNavBar,
    vanActionSheet,
    vanCell,
    vanButton,
    vanRow,
    vanCol,
    vanIcon
  },
  data() {
    return {
      assetsObj: {},
      showSheet: false,
      tasklist: [],
      actions: [],
      time: 0,
    };
  },
  computed: {
    photoDescList() {
      let arr = [];
      if (this.assetsObj.photo && this.assetsObj.photo.length > 0) {
        let list = this.assetsObj.photo || [];
        list = list.map(t => {
          const level =
            this.assetsObj.level1.length > 5
              ? this.assetsObj.level1.substring(0, 5) + "..."
              : this.assetsObj.level1;
          return {
            ...t,
            level
          };
        });
        arr = arr.concat(list);
      }
      if (this.assetsObj.level2list.length > 0) {
        this.assetsObj.level2list.forEach(t => {
          if (t.photo && t.photo.length > 0) {
            let list1 = t.photo || [];
            list1 = list1.map(t1 => {
              const level =
                t.label.length > 5 ? t.label.substring(0, 5) + "..." : t.label;
              return {
                ...t1,
                level
              };
            });
            arr = arr.concat(list1);
          }
        });
      }
      return arr;
    }
  },
  created() {
    const i = parseInt(this.$route.params.i) || 0;
    this.tasklist = getTaskList();
    this.assetsObj = this.tasklist[i] || {};
    this.actions = this.tasklist.map((t, i) => {
      return {
        ...t,
        i,
        name: t.assetsName
      };
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSelect(obj) {
      this.showSheet = false;
      this.assetsObj = this.tasklist[obj.i];
    },
    imgClick(list) {
      this.$imagePreview({
        images: list.map(t => localStorage.getItem(t.item)),
        onClose() {
          // do something
        }
      });
    },
    exportZip() {
      // 第一次点击
      if (!this.time) {
        this.time = new Date().getTime();
        this.ZipAction();
      } else {
        let timeX = new Date().getTime() - this.time;
        // 点击间隔时间超过30秒
        if (timeX > 1 * 30 * 1000) {
          this.time = new Date().getTime();
          this.ZipAction();
        } else {
          this.$toast('请不要在30秒内重复点击');
        }
      }
    },
    ZipAction() {
      tranObjToZip(this.assetsObj, () => {
        this.$toast.success('文件生成完毕，文件保存在 /Android/data/io.dcloud.H5044201D/apps/H5044201D/doc 目录中');
      });
    }
  }
};
</script>
<style lang="less" scoped>
.button-wrap {
  text-align: center;
  padding: 10px 0;
  .van-button {
    width: 90%;
    border-radius: 10px;
  }
}
.my-col {
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid #eee;
  position: relative;
  .col-click {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
  }
}
.van-cell__value {
  flex: 2;
}
</style>
